{template '../web_common/header'}

<!--<style>
    .tb-pager{margin-bottom: 80px!important}
</style>-->

<!-- 中间内容 -->
<div class="mainContent clearfix">
    <div class="center-con clearfix">
        <h2 class="main-ttl">设置中心</h2>
        <div class="main-ctn clearfix">
            <div class="gdgl-tab clearfix">
                <ul class="clearfix">
                    <li class="active">基础配置</li>
                    <li>入口链接</li>
                    <li>七牛云配置</li>
                    <li>模板消息配置</li>
                </ul>
            </div>
            <div class="gdgl-tab-cpontent" style="display: block;">
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>网站名称:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="site_name" maxlength="16" value="{$settings['site_name']}">
                        <p class="c-red" style="margin: 0;line-height: 20px">最多十六个字</p>
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>版权信息:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="copyright" value="{$settings['copyright']}">
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>知识库logo:</span>
                    </div>
                    <div class="r">
                        <div id="preview">
                            <img id="imghead" border="0" src="{php echo !empty($settings['site_logo']) ? tomedia($settings['site_logo'])  : KB_WEB_BACK_IMG.'/photo_icon.png'}" width="48" height="48" onclick="$('#previewImg').click();">
                        </div>
                        <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">

                        <p>建议尺寸48px*32px</p>
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>统计代码:</span>
                    </div>
                    <div class="r">
                        <textarea id="stats_code" name="stats_code"  rows="5">{php echo htmlspecialchars_decode($settings['stats_code']);}</textarea>
                    </div>
                </div>
                <hr>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>公众号回调地址:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="redirect_url" value="{$settings['redirect_url']}" placeholder="类似: http://www.baidu.com">
                        <p class="c-red" style="margin: 0;line-height: 20px">登录公众号平台->公众号设置->功能设置->网页授权域名，进入设置复制域名填入此处，需要在复制的域名前面加上http://</p>
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>公众号appid:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="appid" value="{$settings['appid']}">
                        <p class="c-red" style="margin: 0;line-height: 20px">登录公众号平台->基本配置->开发者ID,复制AppID填入此处</p>
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span class="c-red">*</span><span>公众号appSecret:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="secret" value="{$settings['secret']}">
                        <p class="c-red" style="margin: 0;line-height: 20px">登录公众号平台->基本配置->开发者appSecret,复制secret填入此处</p>
                    </div>
                </div>
            </div>
            <div class="gdgl-tab-cpontent clearfix">
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span>手机工单:</span>
                    </div>
                    <div class="r">
                        <input class="target1 input-text" id="mobile_url" type="text" readonly="readonly" style="width: 600px" name="mobile_url" value="{php echo $_W['siteroot'] . 'app/' . $this->createMobileUrl('index')}">
                        <button class="mobile_url" type="button" ata-clipboard-action="copy" data-clipboard-target="target1" onclick="copyUrl()">复制</button>
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 120px">
                        <span>客服入口:</span>
                    </div>
                    <div class="r">
                        <input class="target2 input-text" type="text" id="web_url" readonly="readonly" style="width: 600px" name="web_url" value="{php echo $_W['siteroot'] . 'app/' . $this->createMobileUrl('Webservice')}" >
                        <button class="web_url" type="button" data-clipboard-target="target2" onclick="copyUrl2()">复制</button>
                    </div>
                </div>
            </div>
            <div class="gdgl-tab-cpontent clearfix">
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 100px">
                        <span class="c-red">*</span><span>开启七牛云:</span>
                    </div>
                    <div class="r">
                        <input class="qiniu_radio" type="radio" name="open_qiniu" value="1" {if $settings['open_qiniu'] == 1}checked{/if}>开启
                        <input class="qiniu_radio" type="radio" name="open_qiniu" value="0" {if $settings['open_qiniu'] == 0}checked{/if}>关闭
                    </div>
                </div>
                <div class="qiniu-config" style="display: {if $settings['open_qiniu'] == 1}block{else}none{/if}">
                    <div class="title mt20" style="background: #f5f5f5; padding:5px">七牛云配置 <span class="c-red">七牛云官网www.qiniu.com</span></div>
                    <div class="item mt20 clearfix">
                        <div class="l text-right" style="width: 100px">
                            <span class="c-red">*</span><span>ACCESS_KEY:</span>
                        </div>
                        <div class="r">
                            <input type="text" style="width: 664px" class="input-text" name="qiniu_access_key" value="{$settings['qiniu_access_key']}">
                            <p class="c-red" style="margin: 0;line-height: 20px">登录七牛开发者平台->个人面板->密钥管理，复制AccessKey填入此处</p>
                        </div>
                    </div>
                    <div class="item mt20 clearfix">
                        <div class="l text-right" style="width: 100px">
                            <span class="c-red">*</span><span>SECREY_KEY:</span>
                        </div>
                        <div class="r">
                            <input type="text" style="width: 664px" class="input-text" name="qiniu_secrey_key" value="{$settings['qiniu_secrey_key']}">
                            <p class="c-red" style="margin: 0;line-height: 20px">登录七牛开发者平台->个人面板->密钥管理，复制SecrreyKey填入此处</p>
                        </div>
                    </div>
                    <div class="item mt20 clearfix">
                        <div class="l text-right" style="width: 100px">
                            <span class="c-red">*</span><span>BUCKET:</span>
                        </div>
                        <div class="r">
                            <input type="text" style="width: 664px" class="input-text" name="qiniu_bucket" value="{$settings['qiniu_bucket']}">
                            <p class="c-red" style="margin: 0;line-height: 20px">登录七牛开发者平台->对象存储，在存储空间列表中找到建立的空间并复制存储空间名称填入此处</p>
                        </div>
                    </div>
                    <div class="item mt20 clearfix">
                        <div class="l text-right" style="width: 100px">
                            <span class="c-red">*</span><span>URL:</span>
                        </div>
                        <div class="r">
                            <input type="text" style="width: 664px" class="input-text" name="qiniu_url" value="{$settings['qiniu_url']}">
                            <p class="c-red" style="margin: 0;line-height: 20px">登录七牛开发者平台->对象存储，在存储空间列表中找到建立的空间，进入空间概览复制域名填入此处，需要在复制的域名前面加上http://</p>
                        </div>
                    </div>
                    <div class="item mt20 clearfix">
                        <div class="l text-right" style="width: 100px">
                            <span class="c-red">*</span><span>上传最大限制:</span>
                        </div>
                        <div class="r">
                            <input type="number" style="width: 664px" class="input-text" name="qiniu_uploadmax" value="{$settings['qiniu_uploadmax']}">
                            <p class="c-red" style="margin: 0;line-height: 20px">单位为M</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gdgl-tab-cpontent clearfix">
                <div class="title mt20" style="background: #f5f5f5; padding:5px">模板消息 </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 100px">
                        <span class="c-red">*</span><span>填写工单:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="workorder_msg" value="{$settings['workorder_msg']}">
                        <p style="margin: 0;line-height: 20px;color: #999">在您授权绑定的公众号平台（IT科技-互联网|电子商务行业）模板库搜素“工单提醒”——OPENTM401096672 添加后将获取的模板id填入此处</p>
                    </div>
                </div>
                <div class="item mt20 clearfix">
                    <div class="l text-right" style="width: 100px">
                        <span class="c-red">*</span><span>收到回复:</span>
                    </div>
                    <div class="r">
                        <input type="text" style="width: 664px" class="input-text" name="receive_msg" value="{$settings['receive_msg']}">
                        <p style="margin: 0;line-height: 20px;color: #999">在您授权绑定的公众号平台（IT科技-互联网|电子商务行业）模板库搜素“工单提醒”——OPENTM401096672 添加后将获取的模板id填入此处</p>
                    </div>
                </div>
            </div>
            <div class="item clearfix mt20" style="position: absolute;left: 20px;bottom: 20px;">
                <button type="button" class="Btn ml10" id="submit">提交</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    require(['jquery', 'layer', 'common'], function ($, layer) {
        //tab切换
        $('.gdgl-tab ul li').on('click',function(){
            var index=$(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.gdgl-tab-cpontent').eq(index).show().siblings('.gdgl-tab-cpontent').hide();
        });

        $('.qiniu_radio').on('click', function () {
            var qiniu_radio = $('input[name=open_qiniu]:checked').val();
            if (qiniu_radio == 1) {
                $('.qiniu-config').show();
            } else {
                $('.qiniu-config').hide();
            }
        });

        $('#submit').on('click', function () {
            var site_name = $('input[name=site_name]').val(),
                copyright = $('input[name=copyright]').val(),
                site_logo = $('#imghead').attr('src'),
                stats_code = $('#stats_code').val(),
                redirect_url = $('input[name=redirect_url]').val(),
                appid = $('input[name=appid]').val(),
                secret = $('input[name=secret]').val(),

                open_qiniu = $('input[name=open_qiniu]:checked').val(),
                qiniu_access_key = $('input[name=qiniu_access_key]').val(),
                qiniu_secrey_key = $('input[name=qiniu_secrey_key]').val(),
                qiniu_bucket = $('input[name=qiniu_bucket]').val(),
                qiniu_url = $('input[name=qiniu_url]').val(),
                qiniu_uploadmax = $('input[name=qiniu_uploadmax]').val(),

                workorder_msg = $('input[name=workorder_msg]').val(),
                receive_msg = $('input[name=receive_msg]').val();
            var data = {
                site_name : site_name,
                site_logo : site_logo,
                copyright : copyright,
                stats_code : stats_code,
                redirect_url : redirect_url,
                appid : appid,
                secret : secret,
                open_qiniu : open_qiniu,
                qiniu_access_key : qiniu_access_key,
                qiniu_secrey_key : qiniu_secrey_key,
                qiniu_bucket : qiniu_bucket,
                qiniu_url : qiniu_url,
                qiniu_uploadmax : qiniu_uploadmax,
                workorder_msg : workorder_msg,
                receive_msg : receive_msg
            };

            $.post("{php echo $this->createWebUrl('system', array('act' => 'index'));}", data, function (data) {
                if (data.code === 200) {
                    layer.msg(data.msg);
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000);
                } else if (data.code == 304) {
                    layer.msg(data.msg);
                    return false;
                }
            });
        });
    });

    function copyUrl() {
        var Url=document.getElementById("mobile_url");
        Url.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，可贴粘。");
    }
    function copyUrl2() {
        var Url2 = document.getElementById("web_url");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，可贴粘。");
    }

    function previewImage(file)
    {
        var MAXWIDTH  = 90;
        var MAXHEIGHT = 90;
        var div = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
            var img = document.getElementById('imghead');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight ){
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight ){
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else{
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>
{template '../web_common/footer'}